<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../WEB-INF/includes/templates/templateAuthenticated.xhtml">
    <ui:define name="content">


        <style>

            .top-bar2{
                border: 1px solid #eeeeee;
            }
        </style>   
        <div align="center"  >
            <div id="main" style="min-height:700px;width:100%;height:auto;" >
                <br/>
                <br/>
                <br/>
                <br/>



                <section  id="services" class="services" >
                    <div class="row" data-view="services" >

                        <div class="row">
                            <div class="columns large-12 large-centered">
                                <section  class="headline">
                                    <h2 style="text-align:left;">

                                        #{messages['page.changePassword.tittle1']}
                                    </h2>
                                    <h5 class="subheader" style="text-align:left;">
                                        #{messages['page.changePassword.descrpcn1']}
                                    </h5>
                                </section>
                            </div>
                        </div>
                        <div class="row">
                            <div class="columns large-12 large-centered">


                                <h:form id="userlogin_form">

                                    <table style="width:500px;">
                                        <thead>
                                            <tr>
                                                <td colspan="3" style="font-size:20px;">
                                                    #{labels['page.changePassword.tabletitle']}
                                                </td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="3" style="height:30px;">
                                                    
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background-color:#FFFFFF;text-align:right">
                                                    <h:outputLabel for="passwordold" value="#{labels['page.changePassword.currentpassord']}" />
                                                </td>
                                                <td style="background-color:#FFFFFF;">
                                                    <p:password id="passwordold" label="#{labels['page.changePassword.currentpassord']}" value="#{changePasswordBean.passwordOld}" required="true" title="#{labels['page.changePassword.currentpassordexplain']}"></p:password>

                                                </td>
                                                <td style="background-color:#FFFFFF;">
                                                    <p:message for="passwordold" id="msgpasswordold" display="icon"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background-color:#FFFFFF;text-align:right">
                                                    <h:outputLabel for="password" value="#{labels['page.changePassword.newpassord']}" />
                                                </td>
                                                <td style="background-color:#FFFFFF;">

                                                    <p:password id="password" label="#{labels['page.changePassword.newpassord']}" value="#{changePasswordBean.password}" required="true" title="#{labels['page.changePassword.newpassordexplain']}">
                                                        <f:validateLength minimum="6" />  
                                                        <p:ajax update="msgpassword" event="blur" listener="#{changePasswordBean.compareOldAndNew()}" />  
                                                    </p:password>

                                                </td>
                                                <td style="background-color:#FFFFFF;">
                                                    <p:message for="password" id="msgpassword" display="icon"/>  
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background-color:#FFFFFF;text-align:right">
                                                    <h:outputLabel for="retypepassword" value="#{labels['page.changePassword.retypenewpassord']}" />
                                                </td>
                                                <td style="background-color:#FFFFFF;">

                                                    <p:password id="retypepassword" label="#{labels['page.changePassword.retypenewpassord']}" value="#{changePasswordBean.reTypePassword}" required="true" title="#{labels['page.changePassword.retypenewpassordexplain']}">
                                                        <f:validateLength minimum="6" />  
                                                        <p:ajax update="msgretypepassword" event="blur" />  
                                                    </p:password>

                                                </td>
                                                <td style="background-color:#FFFFFF;">
                                                    <p:message for="retypepassword" id="msgretypepassword" display="icon"/>  
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="3" style="background-color:#FFFFFF;">
                                                    
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="3" style="background-color:#FFFFFF;text-align:center;">
                                                    <p:commandButton value="#{labels['page.general.continue']}" 
                                                                     action="#{changePasswordBean.changePasswordOperation}" 
                                                                     id="changepasswordsend" 
                                                                     ajax="false"
                                                                      style="font-family:'Open sans',sans-serif;font-size:18px;"
                                                                     >
                                                    </p:commandButton>
                                                    <p:commandButton value="#{labels['page.general.exit']}" 
                                                                     id="changepasswordclose" 
                                                                     action="login" 
                                                                     ajax="false" 
                                                                     immediate="true"
                                                                      style="font-family:'Open sans',sans-serif;font-size:18px;"
                                                        >
                                                                          
                                                    </p:commandButton>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="background-color:#FFFFFF;">
                                                    <p:messages id="msgsLogin"  autoUpdate="true" closable="true"/>
                                                </td>
                                            </tr>
                                        </tbody>    
                                    </table>

                                </h:form>
                            </div>

                        </div>
                    </div>
                </section>

            </div>  
        </div>
    </ui:define>
</ui:composition>    